import React from 'react';
import { Breadcrumb, Icon, Table, Button, Modal, Col, Input, Carousel, message, Row } from 'antd';
import './floor.less';
import $ from 'jquery';
import Config from '../../common/config';

const config = new Config();
const token = sessionStorage.getItem('token')

export default class Floor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            floorList: [],
            dataState: '',//数据状态
            preView: false,//首页预览模态框
            bannerList: [],//轮播图
            recommend: null,//商品推荐
            floor: [],//楼层管理
        }
    }
    componentDidMount() {
        this.getFloorList();
        this.dataState();
    }
    //获取楼层列表
    getFloorList() {
        $.ajax({
            url: `${config.JuseHomepage}/floorApp/list`,
            type: "get",
            headers: {
                Authorization: 'Bearer ' + token,
            },
            success: res => {
                if (res.code === 200) {
                    const floorList = res.data;
                    if (floorList.length > 0) {
                        floorList.forEach((ele, i) => {
                            ele.index = i + 1;
                        });
                        this.setState({
                            floorList
                        });
                    } else {
                        this.setState({
                            floorList
                        })
                    }
                } else {
                    message.error(`${res.mes}请返回重新操作`, 2);
                }
            }
        });
    }
    //删除楼层
    deleteFloor(id) {
        Modal.confirm({
            title: '删除',
            content: '温馨提示：删除后不可恢复，是否继续删除？',
            onOk: () => {
                $.ajax({
                    url: `${config.JuseHomepage}/floorApp/delete`,
                    type: "post",
                    headers: {
                        Authorization: 'Bearer ' + token,
                    },
                    data: { id },
                    success: res => {
                        if (res.code === 200) {
                            this.getFloorList();
                            this.setState({ dataState: '数据未同步' })
                        } else {
                            message.error(`${res.mes}请返回重新操作`, 2);
                        }
                    }
                });
            }
        });
    }
    //新增楼层
    addFloor() {
        if (this.state.floorList.length < 10) {
            window.location.hash = `/floordetailWx/0`
        } else {
            Modal.warning({
                title: '新增失败',
                content: `楼层最多只能添加10个，请先删除再添加！`,
            });
        }
    }
    //同步数据状态
    dataState() {
        $.ajax({
            url: config.JuseHomepage + '/sync/dataState',
            type: 'GET',
            traditional: true,
            dataType: 'json',
            headers: {
                Authorization: 'Bearer ' + token,
            },
            success: (data) => {
                if (data.code === 200) {
                    this.setState({
                        dataState: data.mes
                    });
                } else {
                    this.setState({
                        dataState: '请求失败'
                    });
                }
            },
        })
    }
    //首页生成
    sync() {
        $.ajax({
            url: config.JuseHomepage + '/sync/sync',
            type: 'POST',
            traditional: true,
            dataType: 'json',
            headers: {
                Authorization: 'Bearer ' + token,
            },
        }).then(data => {
            if (data.code === 200) {
                message.info("同步成功")
                this.setState({
                    dataState: "数据已同步"
                })
            } else {
                message.info(data.mes)
            }
        })
    }
    //首页预览
    preView() {
        this.setState({ preView: true })
        $.ajax({
            url: config.JuseHomepage + '/sync/home',
            type: 'GET',
            traditional: true,
            dataType: 'json',
            headers: {
                Authorization: 'Bearer ' + token,
            },
        }).then(data => {
            if (data.code === 200) {
                this.setState({
                    bannerList: data.banner,
                    recommend: data.recommend,
                    floor: data.floor
                })
            } else {
                message.info(data.mes)
            }
        })
    }
    //取消首页预览
    preViewCancel() {
        console.log(1)
        this.setState({
            preView: false
        })
        console.log(this.state.preView)
    }
    render() {
        const columns = [{
            title: '序号',
            dataIndex: 'index',
            width: 50,
        }, {
            title: '楼层名称',
            dataIndex: 'floorname',
            width: 100,
        }, {
            title: '楼层主图',
            dataIndex: 'imgname',
            width: 100,
            render: (text, record) => {
                return <a href={config.Filepath + record.imgname + '?x-oss-process=image/resize,m_fixed,h_145,w_375'} target="_blank" >
                    <img src={config.Filepath + record.imgname + '?x-oss-process=image/resize,,m_lfit,h_40'} style={{ height: "40px", width: "auto" }} />
                </a >
            }
        }, {
            title: '链接地址',
            dataIndex: 'link',
            width: 200,
            render: (text, record) => (
                <a href={text} target='_blank'>{text}</a>
            )
        }, {
            title: '操作',
            key: 'edit',
            width: 50,
            render: (text, record) => (
                <span>
                    <a href="javascript:void(0);" onClick={() => window.location.hash = `/floordetailWx/${record.id}`}>编辑</a>
                </span>
            )
        }, {
            title: '操作',
            key: 'delete',
            width: 50,
            render: (text, record) => (
                <span>
                    <a href="javascript:void(0);" onClick={() => this.deleteFloor(record.id)}>删除</a>
                </span>
            )
        }];
        return (
            <div className='goods-label'>
                <div className='goods-label-cont clearfix'>
                    <div className='goods-label-cont-nav clearfix'>
                        <Breadcrumb separator=">">
                            <Breadcrumb.Item>首页管理</Breadcrumb.Item>
                            <Breadcrumb.Item>楼层管理</Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    <div style={{ marginBottom: '10px', float:'left', width:'100%'}}>
                        <Col span={6}>
                            <Button.Group size="default" >
                                <Button icon="search" style={{ height: 40 }} onClick={this.preView.bind(this)}>首页预览</Button>
                                <Button style={{ height: 40 }} onClick={this.sync.bind(this)}>首页生成</Button>
                            </Button.Group>
                        </Col>
                        <Col span={4}>
                            <div style={{ height: 40, lineHeight: '40px' }}> 数据状态:&nbsp;&nbsp;&nbsp;<span style={this.state.dataState == "数据已同步" ? { color: "green" } : { color: "red" }}>{this.state.dataState}</span></div>
                        </Col>
                    </div>
                    <div className='allgoods-table clearfix' style={{ marginTop: 10 }}>
                        <Table
                            className="floor-table"
                            rowKey="id"
                            columns={columns}
                            dataSource={this.state.floorList}
                            pagination={false}
                            bordered
                        />
                        <div className='goods-label-tabletr'>
                            <Button className='goods-label-table-app' width={160} icon="plus" onClick={() => this.addFloor()}>新增</Button>
                        </div>
                    </div>
                </div>
                {/* 首页预览 */}
                <Modal visible={this.state.preView} onCancel={this.preViewCancel.bind(this)} footer={null} className='preViewModel' closable={false}>
                    <div>
                        <div>
                            <Input.Search placeholder="999感冒灵">
                            </Input.Search>
                            {/* 轮播 */}
                            <Carousel autoplay dots={false}>
                                {
                                    this.state.bannerList.map((value, index) => {
                                        return <div key={index}>
                                            <div>
                                                <a href={value.linkAdress} target="_blank">
                                                    <img src={`${config.Filepath}${value.imgAdress}`} style={{ width: '100%' }} />
                                                </a>
                                            </div>
                                        </div>
                                    })
                                }
                            </Carousel>
                            {/* 推荐 */}
                            {
                                this.state.recommend ?
                                    (<div>
                                        <p style={{ textAlign: 'center', fontWeight: '600', marginTop: 20, marginBottom: 20, fontSize: 14 }}>{this.state.recommend.recommendname}</p>
                                        {this.state.recommend.products.map((value, index) => {
                                            return (<Col span={8} key={index}>
                                                <div style={{ textAlign: 'center' }} >
                                                    <img src={`${value.imageUrl}${value.listImage}?x-oss-process=image/resize,m_fixed,h_100,w_100`} style={{ width: '80%' }} />
                                                </div>
                                                <p style={{ textAlign: 'center' }}>{value.genericName}</p>
                                                <p style={{ textAlign: 'center', color: 'red', fontWeight: '600' }}>{value.marketPrice}</p>
                                            </Col>)
                                        })}
                                    </div>)
                                    : ''
                            }
                        </div>
                        <p style={{ position: 'relative', background: '#aaa', lineHeight: '16px', textAlign: 'center', top: -70 }}>下拉加载更多</p>
                        {/* 楼层 */}
                        <div style={{ minHeight: 630 }}>
                            {
                                this.state.floor.map((value, index) => {
                                    return (<Row key={index} style={{ marginBottom: 10 }}>
                                        <p style={{ textAlign: 'center', fontWeight: '600', marginTop: 10, marginBottom: 10, fontSize: 14 }}>{value.floorname}</p>
                                        <p style={{ textAlign: 'center', marginBottom: 10 }}>{value.floorname}</p>
                                        <Col span={24} style={{ marginBottom: 10 }} >
                                            <a href={value.link} target="_blank">
                                                <div style={{ textAlign: 'center' }} >
                                                    <img src={`${config.Filepath}${value.imgname}`} style={{ width: '90%', maxHeight: 170 }} />
                                                </div>
                                            </a>
                                        </Col>
                                        {value.floorproducts.map((value, index) => {
                                            return (<Col span={8} key={index + 'a'}>
                                                <div style={{ textAlign: 'center' }} >
                                                    <img src={`${value.imageUrl}${value.listImage}?x-oss-process=image/resize,m_fixed,h_100,w_100`} style={{ width: '90%' }} />
                                                </div>
                                                <p style={{ textAlign: 'center' }}>{value.genericName}</p>
                                                <p style={{ textAlign: 'center', color: 'red', fontWeight: '600' }}>{value.marketPrice}</p>
                                            </Col>)
                                        })}
                                    </Row>)
                                })
                            }
                        </div>
                        <div style={{ height: 62, width: 370, backgroundColor: '#fff', position: 'absolute', bottom: 20, left: 20 }}>
                            <img src='src/images/footer.png' style={{ width: 348 }} />
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }
}